
import React, { Component } from 'react'
import { Image } from 'react-native'
import { connect } from 'react-redux'
import { actions } from 'react-native-navigation-redux-helpers'
import { Container, Content, InputGroup, Input, Button, Icon, View } from 'native-base'

import styles from './styles'

const {
  replaceAt,
} = actions

const background = require('../../../img/shadow.png')

const Login = (props) => {
  const { onLoginPress, navigation } = props
  return  (
    <Container>
      <View style={styles.container}>
        <Content>
          <Image source={background} style={styles.shadow}>
            <View style={styles.bg}>
              <InputGroup style={styles.input}>
                <Icon name="ios-person" />
                <Input placeholder="用户名" />
              </InputGroup>
              <InputGroup style={styles.input}>
                <Icon name="ios-unlock-outline" />
                <Input
                  placeholder="密码"
                  secureTextEntry
                />
              </InputGroup>
              <Button style={styles.btn} onPress={() => onLoginPress(navigation)}>
                Login
              </Button>
            </View>
          </Image>
        </Content>
      </View>
    </Container>
  )
}

Login.propTypes = {
  onLoginPress: React.PropTypes.func,
  navigation: React.PropTypes.shape({
    key: React.PropTypes.string
  })
}

export default Login
